<template>
	<view class="archives-page">
		<view class="top">
			<image  class="bg" src="/static/img/base1.png"></image>
			<view class="data">
				<image :src="photo" alt="" class="head">
				<view class="man-data">
					<span class="name">{{nickName}}</span>
					<span class="name">{{mobile}}</span>
					<span class="name">{{jobName}}</span>
				</view>
			</view>
		</view>
		<view class="menu-box">
			<span class="item" v-for="(item,index) in list" :class="item.addClass" @tap="select(index)">{{item.name}}({{item.number}})</span>
		</view>
		<view class="main-content" style="background:rgba(0,0,0,0)" v-show="active==1">
			<!-- <view class="top">
				<span class="text">推荐课程</span>
				<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
			</view> -->
			<view class="course-all">
				<view class="course-item"  v-for="(item,index) in courseList" @tap="previewImage(item)">
					<image :src="$url+item.certificatePhoto" class="image"></image>
					<span class="name">{{item.name}}</span>
					<!-- <p class="content">7月16日出现发热、乏力等症状，自服药物无明显改善。7月21日17时左右到大连市中心医院发热门诊就诊，22日晨核酸检测阳性，当日大连市疾病预防控制中心复测阳性。</p> -->
					<span class="iconfont ">课程:{{item.courseName}}</span>
				</view>
			</view>
			<nodata v-show="start2 && courseList.length==0"></nodata>
		</view>
		<view class="main-content" style="background:rgba(0,0,0,0)" v-show="active==0">
			<!-- <view class="top">
				<span class="text">推荐课程</span>
				<span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span>
			</view> -->
			<view class="course-all">
				<view class="course-item"  v-for="(item,index) in courseList1" @tap="goPage('../course/content?id='+item.privateId)">
					<image :src="$url+item.photo" class="image"></image>
					<span class="name">{{item.courseName}}</span>
					<!-- <p class="content">{{item.introduction}}</p> -->
					<span class="iconfont ">{{item.hours}}课时</span>
				</view>
			</view>
			<nodata v-show="start1 && courseList1.length==0"></nodata>
		</view>
		<view class="main-content" style="background:rgba(0,0,0,0);padding:0" v-show="active==2">

			<scroll-view  scroll-y="true" class="scroll-Y" >
				<view class="test-item" v-for="(item,index) in courseList2">
					<span class="title">{{item.title}}</span>
					<span class="time">{{item.createDate}}</span>
					<!-- <span class="go go1" @tap="goPage('test')" v-show="item.status=='1'">开始测试</span>
					<span class="go go2" v-show="item.status=='2'">已完成</span> -->
					<span class="go go3" >已结束</span>
				</view>
				<nodata v-show="start3 && courseList2.length==0"></nodata>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	import Cookies from 'js-cookie'
	export default {
		components: {nodata},
		data() {
			return {
				list:[
					{name:'已完成课时',addClass:'active',number:0,url:'/f/pageUserStudyHours'},
					{name:'已获得证书',addClass:'',number:0,url:'/f/pageUserCertificate'},
					{name:'已完成测试',addClass:'',number:0,url:'/f/pageUserPaper'},
				],
				start1:false,
				start2:false,
				start3:false,
				url:'/f/pageUserStudyHours',
				active:0,
				courseList:[
					
				],
				pageNo:1,
				pageSize:999,
				photo:'',
				nickName:'',
				jobName:'',
				mobile:'',
				courseList1:[
					
				],
				courseList2:[],
			}
		},
		onLoad(obj) {
			this.photo = uni.getStorageSync("photo");
			this.nickName = uni.getStorageSync("nickName");
			this.jobName = uni.getStorageSync("jobName");
			this.mobile = uni.getStorageSync("mobile");
			this.getList1();
			this.getList2();
			this.getList3();
		},
		methods: {
			previewImage(item){
				let url = this.$url+item.certificatePhoto
				let arr = []; //获取当前页面的轮播图数据
				arr.push(url)
				//uniapp预览轮播图
				uni.previewImage({
					current:url, //预览图片的下标
					urls:arr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			submit(type){
				uni.showToast({
					title:'您的密码已修改',
					iconfont:'success'
				})
				setTimeout(()=>{
					this.back();
				},500)
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			getList1(){
          		let that = this;
	          this.$http.post("/f/pageUserStudyHours"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                let list = response.data;
	                that.list[0].number = response.count;
	                let a = 0;
	                that.start1 = true;
	                if(list.length!=0){
	                	list.forEach((item,i)=>{
	                		a+=Number(item.hours);
	                		item = Object.assign(item,item.educationCourse);
	                	})
	                }
	                that.list[0].number = a;
	                that.courseList1 = list;
	                console.log(list,22299)
	                // if(list.length!=0){
	                //     list.forEach((item,i)=>{
	                //         if(that.type==1){
	                //             item.title = item.educationCourse.courseName;
	                //             item.new = item.hours;
	                //             item = Object.assign(item,item.educationCourseDb);
	                //         }
	                //         else if(that.type==2){
	                //             item.title = item.courseName;
	                //             item.new = item.name;
	                //             item = Object.assign(item,item.educationModelCertificate);
	                //         }
	                //         else if(that.type==3){
	                //             item.new = item.score;
	                //             item = Object.assign(item,item.educationPaper);
	        
	                //         }
	                        
	                //     })

	                // }
	                
	                // that.start = true;
	                // that.dataList = list;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
	        getList2(){
          		let that = this;
	          this.$http.post("/f/pageUserCertificate"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                that.list[1].number = response.count;
	                let list = response.data;
	                that.start2 = true;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.educationModelCertificate,item.educationCourse)
	                        
	                    })

	                }
	                
	                that.courseList = list;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
	        getList3(){
          		let that = this;
	          this.$http.post("/f/pageUserPaper"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                that.list[2].number = response.count;
	                let list = response.data;
	                that.start3 = true;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.educationPaper)
	                        
	                    })

	                }
	                
	                that.courseList2 = list;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.url = item.url;
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.archives-page{
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;
		overflow-y:auto;
		.main-content{
			width:100%;
			box-sizing:border-box;
			padding:20rpx 30rpx;
			padding-bottom:30rpx;
			background:#ffffff;
			.scroll-Y{
				width:100%;
			}
			.test-item{
				width:100%;
				margin:0 auto;
				height:120rpx;
				margin-top:20rpx;
				background:#fff;
				display:flex;
				flex-wrap:wrap;
				align-items:flex-start;
				position:relative;
				.go{
					width: 160rpx;
				    height: 60rpx;
				    line-height: 62rpx;
				    position: absolute;
				    border-radius: 30rpx;
				    text-align: center;
				    right: 30rpx;
				    top: 50%;
				    
				    color: #ffffff;
				    font-size: 28rpx;
				    
				    transform:translateY(-50%);
				}
				.go1{
					box-shadow: 0 2rpx 6rpx #5db2f5;
					background: #5db2f5;
				}
				.go2{
					box-shadow: 0 2rpx 6rpx #68dc9f;
					background: #68dc9f;
				}
				.go3{
					background:#1783dd;
				}
				.title{
					display:block;
					line-height:60rpx;
					height: 60rpx;
					width:calc(100% - 80rpx);
					margin:0 auto;
					margin-top:20rpx;
					box-sizing:border-box;
					padding:0 40rpx;
					border-left:8rpx solid #1783dd;
					color:#555555;
					font-size:32rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				}
				.time{
					display:block;
					line-height:30rpx;
					width:calc(100% - 80rpx);
					margin:0 auto;
					margin-top:0rpx;
					box-sizing:border-box;
					color:#888888;
					font-size:28rpx;

				}
			}
			.course-all{
				width:100%;
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
			}
			.course-item{
				width:330rpx;
				margin-top:30rpx;
				border-radius:10rpx;
				overflow:hidden;
				background:#ffffff;
				padding-bottom:20rpx;
				.image{
					width:100%;
					height:200rpx;
				}
				.name{
					display:block;
					font-weight:600;
					line-height:40rpx;
					height:40rpx;
					width:100%;
					box-sizing:border-box;
					padding:0 15rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:34rpx;
				    color:#555555;
				}
				.content{
					display:block;
					width:100%;
					line-height:40rpx;
					height:120rpx;
					box-sizing:border-box;
					padding:0 15rpx;  
				    font-size:28rpx;
				    color:#888888;
				    display: -webkit-box;    
				    -webkit-box-orient: vertical;    
				    -webkit-line-clamp: 3;    
				    overflow: hidden;
				    margin-top:5rpx;
				}
				.iconfont{
					width:100%;
					display:block;
					line-height:30rpx;
					box-sizing:border-box;
					padding:0 15rpx;
					height:30rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:28rpx;
				    color:#666666;
				    margin-top:10rpx;
				}
				.iconrili1{
					height:70rpx;
					white-space: normal;
					line-height:35rpx;
				}
				.iconrili1:before{
					color:#1783dd;
				}
				.iconfont:before{
					font-size:34rpx;
					margin-right:6rpx;
				}
			}
		}
		.menu-box{
			width:100%;
			box-sizing:border-box;
			padding:0 20rpx;
			background:#ffffff;
			display:flex;
			justify-content: space-between;
			border-bottom:1px solid #e6e6e6;
			position:relative;
			.item{
				line-height:70rpx;
				padding:0 10rpx;
				position:relative;
				color:#555555;
				font-size:30rpx;

			}
			.active{
				color:#1783dd;
			}
			.active:after{
				content:'';
				position:absolute;
				width:80%;
				left:10%;
				bottom:4rpx;
				height:6rpx;
				background:#1783dd;
			}
		}
		.top{
			position:relative;
			width:100%;
			.data{
				width:100%;
				padding:0 60rpx;
				position:absolute;
				left:0;
				top:50%;
				transform:translateY(-50%);
				box-sizing:border-box;
				display:flex;
				.head{
					width:150rpx;
					height:150rpx;
					display:block;
					border-radius:50%;
					margin-right:50rpx;
				}
				.man-data{
					width:calc(100% - 220rpx);
					.name{
						line-height:40rpx;
						font-size:30rpx;
						color:#ffffff;
						display:block;
						width:100%;
						margin-top:10rpx;
					}
				}
			}
		}
		.bg{
			width:100%;
			display:block;
			height:350rpx;
		}
	}
</style>
